<template>
  <tablePage
    ref="tablePage"
    :searchForm="searchForm"
    :requestFunc="requestFunc"
  >
    <template v-slot:search-form>
      <el-form-item label="用户名" prop="smsRecipient">
        <el-input v-model="searchForm.smsRecipient" maxlength="100" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="smsSendStatus">
        <el-select v-model="searchForm.smsSendStatus" placeholder="请选择">
          <el-option v-for="item in messageStatusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="smsMobile">
        <el-input v-model="searchForm.smsMobile" maxlength="100" placeholder="手机号"></el-input>
      </el-form-item>
    </template>

    <template slot="rows">
      <el-table-column prop="smsRecipient" label="收信人" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="smsMobile" label="手机号码" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="smsContent" label="短信内容" show-overflow-tooltip></el-table-column>
      <el-table-column prop="smsSendTime" label="发送时间" width="180" align="center"></el-table-column>
      <el-table-column prop="smsSendStatus" label="状态" width="100" align="center">
        <template slot-scope="{row}">{{row.smsSendStatus | messageStatus}}</template>
      </el-table-column>
      <el-table-column prop="smsBackResult" label="日志信息" show-overflow-tooltip></el-table-column>
    </template>
  </tablePage>
</template>

<script>
import tablePage from "@/components/tablePage/index.vue";
import { messageStatusDict } from "@/utils/dict";
import { dict2Array } from "@/utils/common";
import * as messageAPI from "@/api/message"
import { messageStatus } from "@/utils/filters"

export default {
  name: "message",
  components: { tablePage },
  filters: { messageStatus },
  data() {
    const messageStatusArr = dict2Array(messageStatusDict, false);
    return {
      messageStatusArr,
      searchForm: {
        smsRecipient: '',
        smsSendStatus: '',
        smsMobile: ''
      }
    }
  },
  methods: {
    requestFunc: messageAPI.list
  }
};
</script>

<style scoped>

</style>